import React, {useContext, useState} from 'react';
import {Avatar, Breadcrumb, Button, Modal, Popover, Space} from "antd";
import {DownOutlined, MenuFoldOutlined, MenuUnfoldOutlined} from "@ant-design/icons";
import {CollapsedContext} from "../../../store/frontDesk/collapsed-context";
import {Link, Navigate, useLocation, useNavigate} from "react-router-dom";
import {removeAdminToken} from "../../../utils/adminToken";
import {useDispatch, useSelector} from "react-redux";
import {logout} from "../../../store/backStage/adminLoginSlice";

const MyBreadcrumb = ({breadcrumbItems}) => {
    //控制左侧导航栏的显示隐藏
    const location=useLocation()
    const ctx = useContext(CollapsedContext)
    const nav = useNavigate()
    const dispatch = useDispatch()
    const {adminAllInfo} = useSelector((state) => state.persistedReducer.adminLogin)




    const logoutAdmin = () => {
        nav('/admin/login')
        removeAdminToken()
        dispatch(logout())
    }

    const content = (
        <div style={{display:'flex',flexDirection:'column',height:100,justifyContent:'center'}}>
            <Button type="link" onClick={() => nav('/admin/admin-center')}>个人中心</Button>
            <Button type="link" onClick={() => logoutAdmin()}>退出登录</Button>
        </div>
    );




    return (
        <div style={{
            justifyContent: 'space-between',
            background: 'white',
            width: "100%",
            display: "flex",
            alignItems: 'center'
        }}>
            <div style={{display:'flex',alignItems:'center'}}>
                <Button
                    type="link"
                    onClick={ctx.toggleCollapsed}
                    size={"large"}
                >
                    {ctx.collapsed ? <MenuUnfoldOutlined/> : <MenuFoldOutlined/>}
                </Button>
                <Breadcrumb  >
                    {breadcrumbItems.map((item) => (
                        <Breadcrumb.Item key={item.href}>
                            <Link to={item.href}>{item.title}</Link>
                        </Breadcrumb.Item>
                    ))}
                </Breadcrumb>
            </div>
            <div>
                <Space  style={{paddingRight:50,cursor:'pointer'}}>
                    <Popover  content={content}  trigger="hover">
                        <Avatar    size={50}  src={adminAllInfo.avatar}></Avatar>
                        <DownOutlined />
                    </Popover>
                </Space>
            </div>
        </div>
    );
};

export default MyBreadcrumb;